<template>
	<div>
		<Header></Header>
		<div class="banner_bg">
			<img class="" :src="require('@/assets/front-img/video_banner.png')" alt="">
			<div class="banner_title_bg">
				<div class="banner_big_title">众茶直播中心</div>
				<div class="banner_detail_title">赋能茶行业商家 增强宣传推广的窗口和渠道</div>
			</div>
		</div>
		<div v-if="userInfo.id" class="search_bg">
			<div style="width: 1300px;">
				<el-input v-model="listQuery.name" style="width: 200px;" placeholder="直播间名称" class="filter-item" clearable />
				<el-button style="margin-left: 15px;" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>
		</div>
		<div v-if="list.length > 0" class="wrapper_bg">
			<div class="list_bg">
				<div class="section" v-for="(item) in handleData" :key="item.id">
					<div class="content_bg" v-for="(video,index) in item" :key="index" @click="list_click(video)">
						<div class="img_bg">
							<img :src="video.avatarUrl" alt="">
						</div>
						<div class="video_title">
							{{ video.name }}
						</div>
						<div class="info_bg">
							<div v-if="video.status === 1" class="kb_bg">
								<div class="video_point"></div>
								<div class="kb_title">直播中</div>
							</div>
							<div v-else class="wkb_bg">未开播</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="empty_bg" v-else>
			<div class="info_bg">
				<img src="@/assets/front-img/empty_login_icon.png" />
				<div class="info">您还没登录哦，请点击 <span @click="handleLogin()" class="login">登录</span> ~</div>
			</div>
		</div>

		<Pagination v-if="list.length > 0" :pageNo.sync="listQuery.pageNum" :pageSize.sync="listQuery.pageSize" :total="total" :autoScroll="false" @change="getData()" />
		<Footer></Footer>
		<LiveVideo :visible.sync = "visible"  ref="live"/>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import LiveVideo from "@/views/front/videoCenter/liveVideo"
	import Pagination from "@/views/front/components/Pagination";
	import Footer from "@/views/front/components/Footer";
	import Header from "@/views/front/components/Header";
	import {LiveQueryList} from "@/api/front-home";
	import { getLiveToken } from "@/api/Live";
	export default {
		name: "FrontVideoCenter",
		components: {
			Footer,
			Header,
			Pagination,
			LiveVideo
		},
		watch:{
		'$store.getters.token':{
			handler:function(newVal,oldVal) {
					this.getData();
				},
				deep: true
			}
		},
		data() {
			return {
				list: [],
				total: 0,
				listQuery: {
					name: '',
					pageNum: 1,
					pageSize: 8,
				},
				input: '',
				visible: false,
			};
		},
		computed: {
			...mapGetters(['userInfo']),
			handleData() {
				let index =0;
				let count = 4;
				let arrTemp = [];
				let experts = this.list;
				for(let i=0;i<this.list.length;i++){
					index = parseInt(i/count);
					if (arrTemp.length <= index) {
							arrTemp.push([]);
					}
					arrTemp[index].push(experts[i])
				}
				return arrTemp
			}
		},
		created() {
      if (this.$store.getters.token) {
      	this.getData();
      }
		},
		methods: {
			getData() {
				this.listQuery.name = ''
				LiveQueryList(this.listQuery).then(res => {
					this.list = res.records;
          this.total = res.total
				});
			},
      list_click(obj) {
        if(obj.status === 1){
					// this.$router.push({
          // 	path: "/liveVideo",
          // 	query: {
          // 		shareType: 2,
					// 		mobile: obj.mobile,
					// 		videoId: obj.id
          // 	}
          // });
					// return


					let roomID = 'zcgj@roomID' + obj.mobile;
					let token = ''
					getLiveToken({ roomId: roomID, userId: this.userInfo.id}).then(response => { 
						token = response
						this.visible = true
						this.$refs["live"].start(obj.mobile, token, this.userInfo.id.toString(), obj.avatarUrl)
					}).catch(error => {
						console.log(error);
					})

        } else {
          this.$router.push({
          	path: "/liveRecord",
          	query: {
          		videoId: obj.id,
          	}
          });
        }
      },
			handleLogin() {
				this.$router.push(`/login?redirect=${this.$route.fullPath}`)
			},
			handleSearch() {
				this.listQuery.pageNum = 1;
				LiveQueryList(this.listQuery).then(res => {
					this.list = res.records;
          this.total = res.total
				});
			}
		}
	};
</script>
<style>

.videosearch .el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
	color: #FFFFFF;
	background-color: #0b3395;
	border: 2px solid #80b3ff !important;
	width: 220px;
	border-radius: 25px;
}
</style>
<style lang="scss" scoped>
	.banner_bg {
		position: relative;
		width: 100%;
		height: 373px;

		.banner_title_bg {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.banner_big_title {
				margin-top: 119px;
				height: 79px;
				color: rgba(255, 255, 255, 1);
				font-size: 60px;
				font-weight: 700;
				line-height: 79px;
			}

			.banner_detail_title {
				margin-top: 2px;
				height: 48px;
				color: rgba(255, 255, 255, 1);
				font-size: 36px;
				font-weight: 300;
				line-height: 48px;
			}
		}
	}

	.search_bg {
		position: relative;
		margin-top: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.wrapper_bg {
		width: 100%;
		margin-top: 50px;
		display: flex;
		justify-content: center;

		.list_bg {
			width: 1300px;

			.section {
				margin-top: 40px;
				width: 100%;
				display: flex;

				&:nth-child(1) {
					margin-top: 0px;
				}

				.content_bg {
					position: relative;
					width: 295px;
					height: 420px;
					border: 1px solid rgba(218, 224, 232, 1);;
					box-sizing:border-box;
					margin-left: 40px;
					background: #fff;
					
					&:nth-child(4n+ 1) {
						margin-left: 0px;
					}
					&:hover,
					&:focus,
					&:visited {
						border: 1px solid rgba(252, 38, 38, 1);
						cursor: pointer;
					}

					.img_bg {
						width: 100%;
						height: 370px;

						img {
							width: 100%;
							height: 100%;
      			}
					}

					.video_title {
						width: 100%;
						height: 50px;
						color: rgba(51, 51, 51, 1);
						font-size: 18px;
						font-weight: 400;
						line-height: 50px;
						text-align: center;
						@include ellipsis($line: 1);
					}

					.info_bg {
						position: absolute;
						top: 15px;
						left: 15px;
						width: 90px;
						height: 30px;
					}

					.kb_bg {
						display: flex;
						align-items: center;
						background: rgba(250, 38, 44, 1);
						border-radius: 15px;

						.video_point {
							margin-left: 17px;
							width: 6px;
							height: 6px;
							border-radius: 3px;
							background: rgba(255, 235, 59, 1);
						}

						.kb_title {
							margin-left: 8px;
							height: 30px;
							color: rgba(255, 255, 255, 1);
							font-size: 14px;
							font-weight: 400;
							line-height: 30px;
							text-align: center;
						}
					}

					.wkb_bg {
						width: 100%;
						height: 30px;
						color: rgba(255, 255, 255, 1);
						font-size: 14px;
						font-weight: 400;
						line-height: 30px;
						text-align: center;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 15px;
					}
				}
			}
		}
	}

	.empty_bg {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500px;

		.info_bg {

			.info {
				margin-top: 46px;
				height: 27px;
				color: rgba(153, 153, 153, 1);
				font-size: 18px;
				font-weight: 400;

				.login {
					color: rgba(14, 131, 192, 1);
					cursor: pointer;
				}
			}
		}
	}
</style>
